<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="w-/4 xl:w-1/5 bg-white overflow-auto pm-10">
      <div class="cate-title title-bg"
        >分类列表
        <Tooltip placement="right" :autoAdjustOverflow="true">
          <template #title style="white-space: nowrap"
            >从左到右依次为：产品线数量 | sku量 | 订单数
          </template>
          <InfoCircleOutlined class="help-info" />
        </Tooltip>
      </div>
      <TreeNode
        :treeData="treeData"
        @expand="handleExpand"
        @skuCountClick="handleSelectSku"
        @lineCountClick="handleLineCountClick"
      />
    </div>
    <div class="ml-2 w-3/4 xl:w-4/5">
      <!-- 搜索区域  -->
      <searchFrom :searchInfo="searchInfo" :hasSjName="true" @confirmSearch="handleSearch" />

      <!-- 卡片列表  -->
      <BasicGrid
        v-if="listType == 'grid'"
        :total="total"
        :gridData="gridData"
        @pageClick="jumpTo"
        :searchInfo="searchInfo"
      />
      <ProductLine
        v-if="listType == 'row'"
        :total="total"
        :rowData="rowData"
        @pageClick="lineJumpTo"
        :searchInfo="searchInfo"
      />
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import searchFrom from '/@/components/Custom/SearchFrom.vue'
  import { reactive, ref } from 'vue'
  import { Tooltip } from 'ant-design-vue'
  import { InfoCircleOutlined } from '@ant-design/icons-vue'
  import { BasicGrid } from '/@/components/Grid'
  import { ProductLine } from '/@/components/ProductLine'
  import { productGroupInfoApi, getGroupProductLine } from '/@/api/demo/product'
  import { PageWrapper } from '/@/components/Page'
  import TreeNode from '/@/components/Custom/Tree.vue'
  import { categoryGroupWtApi, getCategoryGroupChildren } from '/@/api/demo/category'
  import { TreeItem } from '/@/components/Tree'
  import { Loading, useLoading } from '/@/components/Loading'

  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  })

  const searchInfo = reactive<Recordable>({
    page: 1,
    domainId: '',
    pageSize: 30,
  })
  const lineSearchInfo = reactive({
    page: 1,
    pageSize: 20,
  })
  const gridData = ref([])
  const rowData = ref([])
  const listType = ref('grid')
  const total = ref(0)
  const treeData = ref<any>([])

  function treeDataFetch(params) {
    categoryGroupWtApi(params).then(
      (res) => {
        treeData.value = res
      },
      (error) => {
        console.log(error)
      },
    )
  }

  /**
   * 获取订单数、sku量等数据
   */
  function getCardData() {
    gridData.value = []
    openFullLoading()
    productGroupInfoApi(searchInfo).then(
      (res) => {
        gridData.value = res.items
        total.value = res.total
        closeFullLoading()
      },
      () => {
        closeFullLoading()
        total.value = 0
        gridData.value = []
      },
    )
  }

  /**
   * 获取产品线数据
   */
  function getProductLineData() {
    rowData.value = []
    openFullLoading()
    getGroupProductLine(lineSearchInfo).then(
      (res) => {
        rowData.value = { catId: res.catId, items: res.items }
        total.value = res.total
        closeFullLoading()
      },
      () => {
        closeFullLoading()
        total.value = 0
        rowData.value = []
      },
    )
  }

  function reload() {
    getCardData()
  }

  function handleSelectSku(node) {
    listType.value = 'grid'
    searchInfo.page = 1
    searchInfo.catId = node.catId
    reload()
  }

  function handleLineCountClick(node) {
    listType.value = 'row'
    searchInfo.page = 1
    lineSearchInfo.page = 1
    lineSearchInfo.domainId = node.domainId
    lineSearchInfo.catId = node.catId
    lineSearchInfo.month_range = searchInfo.month_range
    lineSearchInfo.total = node.sj_name_total
    getProductLineData()
  }

  function handleExpand(node) {
    if (node.expanded) {
      node.expanded = !node.expanded
    } else {
      node.expanded = !node.expanded
      if (node.children_num > 0 && node.children.length <= 1) {
        var param = { catId: node.catId }
        param.month_range = searchInfo.month_range
        getCategoryGroupChildren(param).then(
          (res) => {
            node.children = res
          },
          (error) => {
            console.log(error)
          },
        )
      }
    }
  }

  function handleSearch(formData) {
    listType.value = 'grid'
    searchInfo.catId = ''
    searchInfo.page = 1
    searchInfo.domainId = parseInt(formData.domainId)
    searchInfo.month_range = formData.month_range
    searchInfo.sj_name = formData.sj_name
    reload()
    treeDataFetch(searchInfo)
  }

  function jumpTo(pageNumber) {
    searchInfo.page = pageNumber
    reload()
  }

  function lineJumpTo(pageNumber) {
    lineSearchInfo.page = pageNumber
    getProductLineData()
  }
</script>

<style>
  .cate-title {
    font-size: 16px;
    padding-left: 18px;
    padding-bottom: 4px;
    padding-top: 4px;
    border-bottom: 1px solid #d2d2d2;
    position: sticky;
    top: 0;
    left: 0;
    margin-bottom: 6px;
  }

  .ant-tooltip {
    max-width: 350px !important;
  }

  .help-info:hover {
    color: #0a6cd5;
  }

  .help-info {
    font-size: 14px;
    color: #8d8d8d;
    cursor: pointer;
  }

  .pm-10 {
    margin-top: 5px;
  }
</style>
